import { mapGetters } from "vuex";
import { Tab, Tabs } from 'vant';
import _lodash from "lodash";
// import { Container, Draggable } from "vue-smooth-dnd";
export default {
  props: ["childCon", "comObj", "nowComIdx"],
  components: {
    Tab,
    Tabs
    // DiyImg: () => import("../diycomponents/DiyImg")
  },
  computed: {
    ...mapGetters(["listPageStyle"])
  },
  data() {
    return {
      selectStyle: false,
      active: 0
    };
  },
  watch: {
    listPageStyle: {
      handler(oldVal, newVal) {
        // 更新vuex里面的PageJSON
        this.$store.dispatch("apply/PageJSONUpData");
        // 更新父组件中的PageJSON
        this.$emit("updataNowPageJSON");
      },
      deep: true
    }
  },
  mounted() {
    $("#resizable").resizable();
    console.log(this.comObj);
  },
  methods: {
    // 设置当前组件id
    showItemSet(name, idx) {
      // 显示右侧内容
      this.setComData("DiyList", this.nowComIdx + 1);
      // 设置子元素名称及其索引
      this.$store.commit("list/SET_ChildItem", { name, index: idx });
    },
    setComData(name, val) {
      console.log(val);
      this.$emit("setComData", name, val);
    },
    // 设置样式
    updataItem: _lodash.debounce(function(param, idx, name) {
      this.listPageStyle.childStyle[idx].constyle = param;
      // 更新list组件的vuex
      this.$store.commit("list/SET_ListObj", this.listPageStyle);
      // 更新父组件中的PageJSON
      this.$emit("updataNowPageJSON");
      // 更新vuex里面的PageJSON
      this.$store.dispatch("apply/PageJSONUpData");
    }, 600),
    // 子组件缩放结束事件
    resizestop(param, idx, name) {
      this.listPageStyle.childStyle[idx].constyle = param;
    }
  }
};
